import 'package:flutter/material.dart';
import '../widgets/responsive_widgets.dart';
import '../widgets/product_card.dart';

/// 首页屏幕
/// 展示各种Widget的使用技巧和响应式布局
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取屏幕尺寸信息，用于响应式设计
    final screenSize = MediaQuery.of(context).size;
    final isTablet = screenSize.width > 600; // 平板断点
    final isDesktop = screenSize.width > 900; // 桌面断点

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Widget 学习'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        elevation: 0, // 移除阴影，使用Material 3风格
        // 响应式AppBar：在平板上显示更多操作按钮
        actions: [
          if (isTablet) ...[
            IconButton(icon: const Icon(Icons.search), onPressed: () {}),
            IconButton(icon: const Icon(Icons.notifications), onPressed: () {}),
          ],
          IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 1. 横幅区域 - 学习Container、Stack、Positioned
            _buildBannerSection(context, isTablet),

            const SizedBox(height: 20),

            // 2. 分类导航 - 学习GridView、InkWell
            _buildCategorySection(context, isTablet),

            const SizedBox(height: 20),

            // 3. 热门商品 - 学习ListView、Card
            _buildHotProductsSection(context, isTablet, isDesktop),

            const SizedBox(height: 20),

            // 4. 响应式布局演示 - 学习LayoutBuilder、Flex
            _buildResponsiveDemoSection(context, isTablet, isDesktop),
          ],
        ),
      ),
    );
  }

  /// 构建横幅区域
  /// 展示Container、Stack、Positioned等Widget的使用
  Widget _buildBannerSection(BuildContext context, bool isTablet) {
    return Container(
      // 响应式高度：平板300px，手机200px
      height: isTablet ? 300 : 200,
      margin: const EdgeInsets.symmetric(horizontal: 16),
      // 使用渐变背景，增加视觉效果
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Theme.of(context).colorScheme.primary,
            Theme.of(context).colorScheme.secondary,
          ],
          begin: Alignment.topLeft, // 渐变起始点
          end: Alignment.bottomRight, // 渐变结束点
        ),
        borderRadius: BorderRadius.circular(16), // 圆角边框
      ),
      child: Stack(
        children: [
          // 背景装饰：使用Positioned定位圆形装饰
          Positioned(
            right: -50,
            top: -50,
            child: Container(
              width: 150,
              height: 150,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.1), // 半透明白色
                shape: BoxShape.circle, // 圆形
              ),
            ),
          ),
          // 主要内容区域
          Padding(
            padding: const EdgeInsets.all(24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, // 左对齐
              mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
              children: [
                // 主标题
                Text(
                  '学习 Flutter Widget',
                  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 8),
                // 副标题
                Text(
                  '掌握响应式布局技巧',
                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                    color: Colors.white.withOpacity(0.9), // 半透明白色
                  ),
                ),
                const SizedBox(height: 16),
                // 行动按钮
                ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.white, // 白色背景
                    foregroundColor: Theme.of(
                      context,
                    ).colorScheme.primary, // 主色调文字
                  ),
                  child: const Text('开始学习'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// 构建分类导航区域
  /// 展示GridView、InkWell等Widget的使用
  Widget _buildCategorySection(BuildContext context, bool isTablet) {
    // 分类数据
    final categories = [
      {'icon': Icons.phone_android, 'name': '手机'},
      {'icon': Icons.laptop, 'name': '电脑'},
      {'icon': Icons.headphones, 'name': '耳机'},
      {'icon': Icons.watch, 'name': '手表'},
      {'icon': Icons.camera_alt, 'name': '相机'},
      {'icon': Icons.games, 'name': '游戏'},
    ];

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 分类标题
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Text('商品分类', style: Theme.of(context).textTheme.headlineSmall),
        ),
        const SizedBox(height: 12),
        // 水平滚动的分类网格
        SizedBox(
          height: isTablet ? 120 : 100, // 响应式高度
          child: GridView.builder(
            scrollDirection: Axis.horizontal, // 水平滚动
            padding: const EdgeInsets.symmetric(horizontal: 16),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 1, // 单列
              mainAxisSpacing: 12, // 垂直间距
              childAspectRatio: isTablet ? 1.2 : 1.0, // 响应式宽高比
            ),
            itemCount: categories.length,
            itemBuilder: (context, index) {
              final category = categories[index];
              return InkWell(
                onTap: () {}, // 点击事件
                borderRadius: BorderRadius.circular(12), // 点击效果圆角
                child: Container(
                  decoration: BoxDecoration(
                    color: Theme.of(context).colorScheme.surface,
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(
                      color: Theme.of(
                        context,
                      ).colorScheme.outline.withOpacity(0.2),
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      // 分类图标
                      Icon(
                        category['icon'] as IconData,
                        size: isTablet ? 32 : 28, // 响应式图标大小
                        color: Theme.of(context).colorScheme.primary,
                      ),
                      const SizedBox(height: 8),
                      // 分类名称
                      Text(
                        category['name'] as String,
                        style: Theme.of(context).textTheme.bodyMedium,
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }

  /// 构建热门商品区域
  /// 展示ListView、Card等Widget的使用
  Widget _buildHotProductsSection(
    BuildContext context,
    bool isTablet,
    bool isDesktop,
  ) {
    // 商品数据
    final products = [
      {'name': 'iPhone 15 Pro', 'price': '¥7999', 'image': '📱'},
      {'name': 'MacBook Air', 'price': '¥8999', 'image': '💻'},
      {'name': 'AirPods Pro', 'price': '¥1999', 'image': '🎧'},
      {'name': 'Apple Watch', 'price': '¥2999', 'image': '⌚'},
    ];

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 热门商品标题
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Text('热门商品', style: Theme.of(context).textTheme.headlineSmall),
        ),
        const SizedBox(height: 12),
        // 水平滚动的商品列表
        SizedBox(
          height: isTablet ? 280 : 220, // 响应式高度
          child: ListView.builder(
            scrollDirection: Axis.horizontal, // 水平滚动
            padding: const EdgeInsets.symmetric(horizontal: 16),
            itemCount: products.length,
            itemBuilder: (context, index) {
              final product = products[index];
              return Container(
                width: isTablet ? 200 : 160, // 响应式宽度
                margin: const EdgeInsets.only(right: 16),
                child: ProductCard(
                  name: product['name']!,
                  price: product['price']!,
                  image: product['image']!,
                  onTap: () {}, // 点击事件
                ),
              );
            },
          ),
        ),
      ],
    );
  }

  /// 构建响应式布局演示区域
  /// 展示LayoutBuilder、Flex等高级布局Widget的使用
  Widget _buildResponsiveDemoSection(
    BuildContext context,
    bool isTablet,
    bool isDesktop,
  ) {
    return Container(
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: Theme.of(context).colorScheme.outline.withOpacity(0.2),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 演示标题
          Text('响应式布局演示', style: Theme.of(context).textTheme.headlineSmall),
          const SizedBox(height: 16),
          // 显示当前屏幕信息
          Text(
            '当前屏幕尺寸: ${MediaQuery.of(context).size.width} x ${MediaQuery.of(context).size.height}',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
          Text(
            '设备类型: ${isDesktop
                ? '桌面'
                : isTablet
                ? '平板'
                : '手机'}',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
          const SizedBox(height: 16),
          // 响应式网格布局演示
          LayoutBuilder(
            builder: (context, constraints) {
              // 根据屏幕大小确定网格列数
              final crossAxisCount = isDesktop
                  ? 4
                  : isTablet
                  ? 3
                  : 2;
              return GridView.builder(
                shrinkWrap: true, // 自适应内容高度
                physics: const NeverScrollableScrollPhysics(), // 禁用滚动
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: crossAxisCount, // 列数
                  crossAxisSpacing: 12, // 水平间距
                  mainAxisSpacing: 12, // 垂直间距
                  childAspectRatio: 1.5, // 宽高比
                ),
                itemCount: 6,
                itemBuilder: (context, index) {
                  return Container(
                    decoration: BoxDecoration(
                      color: Theme.of(context).colorScheme.primaryContainer,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Center(
                      child: Text(
                        '项目 ${index + 1}',
                        style: Theme.of(context).textTheme.bodyMedium,
                      ),
                    ),
                  );
                },
              );
            },
          ),
        ],
      ),
    );
  }
}
